<template>
  <el-row style="margin-top: 20px">
    <el-col :span="4" style="text-align:center">
      <div>
        <el-avatar :size="100" :src="getUserAvatar" />
      </div>
      <div style="margin-top: 20px">{{getUsername}}</div>
      <div style="margin-top: 20px">{{user.brief}}</div>
    </el-col>
    <el-col :span="20">
      <el-tabs v-model="appObject.activeName" class="demo-tabs">
        <el-tab-pane label="WG报表" name="wgReport">
          <WGList/>
        </el-tab-pane>
        <el-tab-pane label="概览" name="wgOverview">
          <WGOverview/>
        </el-tab-pane>
        <el-tab-pane label="WG" name="WG">
          <WGCardList/>
        </el-tab-pane>
        <el-tab-pane label="排行榜" name="score">
          <Score/>
        </el-tab-pane>
        <el-tab-pane label="我的成就" name="ach">
          <Achievement/>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script setup>
  
  import { reactive } from 'vue'
  
  import userStore from '../store/user.js'
  import {storeToRefs} from 'pinia'
  
  import WGList from '../components/WGList.vue'
  import WGOverview from '../components/WGOverview.vue'
  import WGCardList from '../components/WGCardList.vue'
  import Score from '../components/Score.vue'
  import Achievement from '../components/Achievement.vue'
  
  const uStore = userStore()
  const { user,getUsername, getUserAvatar } = storeToRefs(uStore)
  
  const appObject = reactive({
    activeName: "wgReport"
  })
  
</script>

<style scoped>
</style>